<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Using custom HTML</title>
</head>
<body>
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js"></script>

<!--
We strongly recommend <pre><code> wrapping for code blocks. It’s quite semantic and “just works” out of the box with zero fiddling. It is possible to use other HTML elements (or combos), but you may need to pay special attention to preserving linebreaks.

我们强烈建议对代码块使用 <pre><code> 包装。
这是非常语义化的，并且“开箱即用”，零摆弄。
可以使用其他 HTML 元素（或组合），但您可能需要特别注意保留换行符。(不会自动换行 显示出来是一行)
-->

<div class='code'>
let a = 123;
console.log(a);
function abc(){}
class bb{
  constructor(){}
  do(){}
}
for(let i=0;i<3;++i){
  console.log(i)
}
console.log(a)
const a = require('hightlight.js')
</div>

<script>
  // first, find all the div.code blocks
  document.querySelectorAll('div.code').forEach(el => {
    // then highlight each
    hljs.highlightElement(el);
  });
</script>

<!--
Without using a tag that preserves linebreaks (like pre) you’ll need some additional CSS to help preserve them. You could also pre and post-process line breaks with a plug-in, but we recommend using CSS.

如果不使用保留换行符的标签(如pre)，您将需要一些额外的CSS来帮助保留换行符。

您也可以使用插件进行预处理和后处理换行：
+ https://github.com/highlightjs/highlight.js/issues/2559

但我们建议使用CSS。
-->

<style>
  div.code {
    white-space: pre;
  }
</style>
</body>
</html>
